<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>字典管理</title>
    <meta name="decorator" content="default"/>
    <link rel="stylesheet" href="${ctxStatic}/bootstrap-table/bootstrap-table.css">
    <script src="${ctxStatic}/bootstrap-table/bootstrap-table.js"></script>
    <script src="${ctxStatic}/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="${ctxStatic}/bootstrap-table/config.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#search").click(function () {
                var ids = $.map($("#t1").bootstrapTable('getSelections'), function (row) {
                    return row.id
                });
                alert("您选择了:" + ids);
            });
            $("#select").click(function () {
                $("#t1").bootstrapTable('refresh', {url: '${ctx}/sys/dict/listAjaxData', query: {name: 111}});
            });
            $("#t1").bootstrapTable(
                $.fn.BTConfig(
                    {
                        url: "${ctx}/sys/dict/listAjaxData",
                        //detailView: false,
                        columns: [
                            [
                                {
                                    field: 'state',
                                    checkbox: true,
                                    align: 'center',
                                    rowspan: 2
                                },
                                {
                                    title: '主键<i class="icon icon-user"></i>可以直接html',
                                    field: 'id',
                                    align: 'center',
                                    rowspan: 2
                                },
                                {
                                    title: '创建时间',
                                    field: 'createDate',
                                    sortable: true,
                                    rowspan: 2
                                },
                                {
                                    title: '明细',
                                    colspan: 7
                                }
                            ], [
                                {
                                    title: '是否是新记录',
                                    field: 'isNewRecord',
                                    formatter: function (value, row, index) {
                                        var _type = "当前是第" + index + "行";
                                        if (value == "true") {
                                            _type = _type + '<i class="icon icon-thumbs-up"></i>'
                                        } else {
                                            _type = _type + '<i class="icon icon-thumbs-down"></i>'
                                        }
                                        return _type;
                                    }
                                },
                                {
                                    title: '更新时间',
                                    field: 'updateDate',
                                    visible: false
                                },
                                {
                                    title: '值',
                                    field: 'value',
                                    sortable: true,
                                    footerFormatter: function (data) {
                                        var sum = 0;
                                        $(data).each(function (i, item) {
                                            sum = sum + Number(item.value);
                                        });
                                        return sum;
                                    }
                                },
                                {
                                    title: '标签',
                                    field: 'label',
                                    visible: false
                                },
                                {
                                    title: '类型',
                                    field: 'type'
                                },
                                {
                                    title: '排序',
                                    field: 'sort'
                                },
                                {
                                    field: 'operate',
                                    title: 'Item Operate',
                                    align: 'center',
                                    events: {
                                        'click .like': function (e, value, row, index) {
                                            alert('反正一个什么操作: ' + JSON.stringify(row));
                                        },
                                        'click .remove': function (e, value, row, index) {
                                            alert('删除的操作放在这里: ' + JSON.stringify(row));
                                        }
                                    },
                                    formatter: function (value, row, index) {
                                        return [
                                            '<a class="like" href="javascript:void(0)" title="Like">',
                                            '<i class="icon icon-heart"></i>',
                                            '</a>  ',
                                            '<a class="remove" href="javascript:void(0)" title="Remove">',
                                            '<i class="icon icon-remove"></i>',
                                            '</a>'
                                        ].join('');
                                    }
                                }]
                        ]
                    })
            );
            /* {
             url: "
            ${ctx}/sys/dict/listAjaxData",//一个ajax地址
             toolbar: "#toolbar",
             rowStyle: {classes: 'list', height: 20},//定义列的class
             iconsPrefix: "icon",
             sortName: 'createDate',
             classes: 'table table-condensed table-hover',
             striped: true,
             cache: false,
             method: 'post',
             contentType: 'application/x-www-form-urlencoded',
             pagination: true,
             queryParamsType: 'page',
             sidePagination: "server",
             smartDisplay: false,
             showFooter: true,
             showPaginationSwitch: true,
             showRefresh: true,
             showToggle: true,
             showColumns: true,
             minimumCountColumns: 4,
             clickToSelect: true,
             detailView: true,
             cardView: false,
             pageList: [10, 25, 50, 100],
             responseHandler: function (res) {
             var page = new Object();
             page.total = res.count;
             page.rows = res.list;
             return page;
             },
             queryParams: function (params) {
             params.pageNo = params.pageNumber;
             params.orderBy = params.sortName + " " + params.sortOrder
             return params;
             },
             detailFormatter: function (index, row) {
             return row.description;
             },
             icons: {
             paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
             paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
             refresh: 'glyphicon-refresh icon-refresh',
             toggle: 'glyphicon-list-alt icon-list-alt',
             columns: 'glyphicon-th icon-th',
             detailOpen: 'glyphicon-plus icon-plus',
             detailClose: 'glyphicon-minus icon-minus'
             },
             columns: [
             [
             {
             field: 'state',
             checkbox: true,
             align: 'center',
             rowspan: 2
             },
             {
             title: '主键<i class="icon icon-user"></i>可以直接html',
             field: 'id',
             align: 'center',
             rowspan: 2
             },
             {
             title: '创建时间',
             field: 'createDate',
             sortable: true,
             rowspan: 2
             },
             {
             title: '明细',
             colspan: 7
             }
             ], [
             {
             title: '是否是新记录',
             field: 'isNewRecord',
             formatter: function (value, row, index) {
             var _type = "当前是第" + index + "行";
             if (value == "true") {
             _type = _type + '<i class="icon icon-thumbs-up"></i>'
             } else {
             _type = _type + '<i class="icon icon-thumbs-down"></i>'
             }
             return _type;
             }
             },
             {
             title: '更新时间',
             field: 'updateDate',
             visible: false
             },
             {
             title: '值',
             field: 'value',
             sortable: true,
             footerFormatter: function (data) {
             var sum = 0;
             $(data).each(function (i, item) {
             sum = sum + Number(item.value);
             });
             return sum;
             }
             },
             {
             title: '标签',
             field: 'label',
             visible: false
             },
             {
             title: '类型',
             field: 'type'
             },
             {
             title: '排序',
             field: 'sort'
             },
             {
             field: 'operate',
             title: 'Item Operate',
             align: 'center',
             events: {
             'click .like': function (e, value, row, index) {
             alert('反正一个什么操作: ' + JSON.stringify(row));
             },
             'click .remove': function (e, value, row, index) {
             alert('删除的操作放在这里: ' + JSON.stringify(row));
             }
             },
             formatter: function (value, row, index) {
             return [
             '<a class="like" href="javascript:void(0)" title="Like">',
             '<i class="icon icon-heart"></i>',
             '</a>  ',
             '<a class="remove" href="javascript:void(0)" title="Remove">',
             '<i class="icon icon-remove"></i>',
             '</a>'
             ].join('');
             }
             }]
             ]
             }*/
        });
    </script>
</head>
<body>
<h1>有个table,他有一点任性,他还有一点嚣张</h1>
<hr>
<div id="toolbar">
    <button id="search" class="btn btn-danger">
        <i class="icon icon-search icon-white"></i>选择
    </button>
    <button id="select" class="btn btn-primary">查询
    </button>
</div>
<table id="t1"/>
</body>
</html>